VercelでホスティングしているサイトにRoute53で取得したドメインをサブドメインとして設定する
どうも！大阪オフィスの西村祐二です。
Vercelは無料の個人アカウント（Hobbyプラン）でもかなりいろいろできます。複数のアプリケーションもホスティングすることができます。詳細は公式サイトをご確認ください。
Next.jsやGatsby.jsなどで作成したサイトをホスティングさせるとき、サブドメインを設定したいなと思うことがあります。
（個人的にドメインを設定するとなんだかモチベーションがあがります。）
やりたいことのイメージとしては下記になります。
Route53で取得しているドメインがあるのでそれを利用してVercelでホスティングしているアプリケーションにサブドメインを設定する手順を備忘録を兼ねてまとめたいと思います。
やってみる
前提
- Route53でドメインを取得済である
今回、ynishimura0922.comというドメインを利用しています。
ドメイン取得の流れは下記ブログが参考になります。
- アプリケーションをVercelでホスティング済である
Vercel側の設定
Vercelのダッシュボードから対象のプロジェクトを選択し、「Settings」 => 「Domains」に移動します。
そこで設定したいドメインを追加します。今回、「gatsby-blog-sample.ynishimura0922.com」と設定し追加しました。
Route53側の設定
AWSのマネージメントコンソールのRoute53に移動し、ホストゾーンにある取得したドメインの設定画面に移動します。
そこで「レコードを作成」をクリックします。
ここでは
- レコード名：
gatsby-sample-blog -
レコードタイプ：CNAME
-
値：
cname.vercel-dns.com
と設定してレコードを作成します。
vercelのドキュメントはこちら
Vercel側の画面確認
Vercelの画面で設定したドメインでエラーが出ていなければOKです。
動作確認
設定が完了して10−20分ぐらい経過したあとに設定したURLにアクセスするとホスティングしているサイトが確認できるようになります。また、HTTPSでアクセスできます。Let's Encryptが利用されているようです。
Vercelに新しくアプリケーションを追加した際にも同じ要領でドメイン設定することで指定したドメインにアクセスすることができます。
さいごに
Route53で取得したドメインを利用してVercelでホスティングしているアプリケーションにサブドメインを設定する手順をまとめました。
とても簡単に設定できました。Vercelには他にたくさん機能があるのでいろいろキャッチアップしていきたいと思います。
誰かのお役に立てたら幸いです。
参考サイト
https://vercel.com/docs/custom-domains#subdomains
https://zenn.dev/lollipop_onl/articles/eoz-vercel-pricing-2020
